import Vue from "vue";
import App from "./App.vue";
import "./styles/index.css";
import VueRouter from "vue-router";
import HmFind from "./components/HmFind.vue";
//引入路由
//Vue会注册全局组件 router-link router-view
Vue.use(VueRouter);
//配置路由
const router = new VueRouter({
  routes: [{ path: "/xxx", component: HmFind }],
});
// 导入组件
// import HmFooter from "./components/HmFooter.vue";
// 大写注册：使用时大小写均可
// 小写注册。使用时只能用小写
// 全局注册组件
//必须写到new Vue之前
// Vue.component("HmFooter", HmFooter);

//自定义颜色指令
// Vue.directive("color", {
//   //当前指令绑定到元素上，元素创建显示时，会自动执行
//   //创建时只会执行一次
//   inserted(el, bingding) {
//     //el表示绑定指令的元素
//     // console.log("v-xxx所在的元素被创建时自动执行", el);
//     //binding是个对象
//     //value表示指令绑定的值
//     el.style.color = bingding.value;
//   },
//   //当指令所在元素被更新时，会自动执行
//   update(el, bingding) {
//     // console.log("指令所在元素被更新时执行", el);
//     el.style.color = bingding.value;
//   },
// });

//自定义loading指令
Vue.directive("loading", {
  //当前指令绑定到元素，元素创建显示时，会白动执行只会执行一次
  inserted(el, binding) {
    // console.log("  ----->  ", el.className);
    if (binding.value === true) {
      if (el.className.indexOf("loading") === -1) {
        el.className += " loading";
      }
    } else {
      el.className = el.className.replace("loading", "");
    }
  },
  update(el, binding) {
    if (binding.value === true) {
      if (el.className.indexOf("loading") === -1) {
        el.className += " loading";
      }
    } else {
      el.className = el.className.replace("loading", "");
    }
  },
});
Vue.config.productionTip = false;
new Vue({
  render: (h) => h(App),
  //注册路由
  router: router,
}).$mount("#app");
